<template>
	<view>
		<view class="tabbar-height"></view>
		<view class="position-fixed p-bottom tabbar wid-100  white-bj">
			<view class="tabbar-box j-center pad-t-10" >
				<block v-for="(item,index) in tabList" :key="index">
					<view class="tabbar-item flex-1 d-a-j-c flex-column position-relative" :class="{'active':tabIndex==index}" @tap="tabTap(index,item.pagePath)">
						<view :class="item.isTu==2?'tabbar-img-D':'tabbar-img'">
							<image :src="item.iconed" mode="widthFix"  lazy-load v-if="tabIndex==index"></image>
							<image :src="item.icon" mode="widthFix"  lazy-load v-else></image>
						</view>
						<view class="black81-zt tabbar-wen font-24 mar-top10  line-h28" v-if="item.isTu==1">{{item.name}}</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props:{
			tabIndex:Number
		},
		data() {
			return {
				tabList:[
					{id:1,name:'首页',icon:'../static/icon_home.png',iconed:'../static/icon_home_active.png',isTu:1,pagePath:'/pages/index/index'},
					{id:2,name:'分类',icon:'../static/icon_classification.png',iconed:'../static/icon_classification_active.png',isTu:1,pagePath:'/pages/cate/cate'},
					{id:3,name:'',icon:'../static/WechatIMG2012.png',iconed:'../static/WechatIMG2012.png',isTu:2,pagePath:'/pages/fuwuList/fuwuList'},
					{id:4,name:'服务日程',icon:'../static/icon_service.png',iconed:'../static/icon_service_active.png',isTu:1,pagePath:'/pages/fuwuDate/fuwuDate'},
					{id:5,name:'我的',icon:'../static/icon_user.png',iconed:'../static/icon_user_active.png',isTu:1,pagePath:'/pages/my/my'}
				],
			};
		},
		methods:{
			//tabbar点击切换事件
			tabTap(index,url){
				uni.switchTab({
					url:url
				})
				//this.$emit('tabTap',index) //子组件传值给父组件
			},
			//点击打开商品详情
			openShop(id){
				uni.navigateTo({
					url:'/pages/shopDetails/shopDetails?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	image{
		width: 100%;
		display: block;
	}
	.tabbar-height{
		width: 100%;
		height: 150rpx;
	}
	.tabbar{
		height: 150rpx;
		.tabbar-box{
			height: 100rpx;
			.tabbar-item{
				.tabbar-img{
					width: 46rpx;
					height: 46rpx;
				}
				.tabbar-img-D{
					width: 130rpx;
					position: absolute;
					bottom: 0;
				}
			}
			.active{
				.tabbar-wen{
					color: #7ab13d!important;
				}
			}
		}
	}
</style>